<template>
<div class="approvalProcess">
    <!-- 新建的抽屉组件 -->
    <el-drawer v-model="drawer" title="请输入新增流程" :with-header="true" class="ctMain">
                <div class="ctMain-text">
                    <div><span>流程名称：</span><el-input v-model="add.process" placeholder="请输入流程名称" /></div>
                    <div><span>表名：</span><el-input v-model="add.tableName" placeholder="请输入表名" /></div>
                    <div><span>功能菜单：</span><el-input v-model="add.feature" placeholder="请输入功能菜单" /></div>
                    <div><span>是否启用：</span><el-input v-model="add.start" placeholder="请输入是否启用" /></div>
                    <div><span>备注：</span><el-input v-model="add.remark" placeholder="请输入备注" /></div>
                    <div><span>创建人：</span><el-input v-model="add.creator" placeholder="请输入创建人" /></div>
                    <div><span>创建时间：</span><el-input v-model="add.creationTime" placeholder="请输入创建时间" /></div>
                </div>
                <div class="ctMain-btn">
                    <el-button type="info" @click="">取消</el-button>
                    <el-button type="primary" @click="sureAli">确定</el-button>
                </div>
        </el-drawer>

        <!-- 编辑的弹出框 -->
            <el-dialog
            v-model="dialogVisible"
            title="修改"
            width="30%"
            :before-close="handleClose"
            >
                <div class="ctMain-text">
                    <div><span>流程名称：</span><el-input v-model="newData.obj.process"  placeholder="请输入流程名称" />
                    </div>
                    <div><span>表名：</span><el-input v-model="newData.obj.tableName" placeholder="请输入表名" /></div>
                    <div><span>功能菜单：</span><el-input v-model="newData.obj.feature" placeholder="请输入功能菜单" /></div>
                    <div><span>是否启用：</span><el-input  v-model="newData.obj.start" placeholder="请输入是否启用" /></div>
                    <div><span>备注：</span><el-input v-model="newData.obj.remark" placeholder="请输入备注" /></div>
                    <div><span>创建人：</span><el-input v-model="newData.obj.creator" placeholder="请输入创建人" /></div>
                    <div><span>创建时间：</span><el-input v-model="newData.obj.creationTime" placeholder="请输入创建时间" /></div>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="besure">
                        完成
                        </el-button>
                    </span>
                </template>
            </el-dialog>
    <div class="approvalProcess-top">
        <div class="left">
            <span class="icon"><el-icon><Grid /></el-icon></span><span class="span1">审批流程配置</span>
        </div>
        <div class="right">
            <el-input class="input1" v-model="input" placeholder="流程名称" />
            <el-button type="primary" :icon="Search" @click="GetPage">查 询</el-button>
            <el-button size="default" :icon="Search">高级查询</el-button>
            <el-button type="success" :icon="Plus" @click="drawer = true">新 建</el-button>
            <el-button type="primary" :icon="EditPen" @click="compile">编辑</el-button>
            <el-button @click="handleDelete" type="danger" :icon="Delete">删 除</el-button>
            <el-button :icon="Grid" class="jgg"></el-button>
        </div>
    </div>
    <div class="approvalProcess-middle">
        <p><el-button class="success-btn" type="success" :icon="Check" circle />流程设计器根据easy-flow修改</p>
    </div>
    <div class="approvalProcess-bottom">
        <el-table
        ref="multipleTableRef"
        :data="dataPageAll"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        >N
            <el-table-column type="selection" width="55" select-all="selection"/>
            <el-table-column label="流程名称" property="process" width="120"></el-table-column>
            <el-table-column property="tableName" label="表名" width="120" />
            <el-table-column property="feature" label="功能菜单" show-overflow-tooltip />
            <el-table-column property="start" label="是否启用" show-overflow-tooltip />
            <el-table-column property="remark" label="备注" show-overflow-tooltip />
            <el-table-column property="creator" label="创建人" show-overflow-tooltip />
            <el-table-column property="creationTime" label="创建时间" show-overflow-tooltip />
            <el-table-column property="" label="修改人" show-overflow-tooltip />
            <el-table-column property="" label="修改时间" show-overflow-tooltip />
        </el-table>
        </div>
        <div class="footer">
            <el-pagination
            v-model:current-page="pageIndex"
            v-model:page-size="pageSize"
            :page-sizes="[5, 10, 15, 20]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="num"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
        </div>
</div>
</template>

<script setup>
import { ref,onMounted,reactive } from 'vue'
import { Search ,Plus,EditPen,Delete,Grid,Check} from '@element-plus/icons-vue'
import { ElTable,ElMessage,ElMessageBox } from 'element-plus'
// import '../../Mock/ProcessManage/ProcessManage'
import axios from 'axios'
axios.interceptors.request.use(
    config => {
        config.headers['token'] = sessionStorage.getItem('token')
        return config
    },
    error => {
        return Promise.reject(error)
    })
const input = ref('')

const tableData = [
    {
    date: '测试',
    name: 'Demo_Produc',
    address: '产品管理',
    luange: '是',
    remark:'123',
    founders:'超级管理员',
    creationTime:'2019-10-15',
    modifier:'',
    modificationTime:'',
    }
]
const listData = ref([])
const list = async () => {
    let {data} = await axios.get('/text/listAll')
    listData.value = data
}
const id = ref('')

// 分页数据定义
const pageSize = ref(10)
const pageIndex = ref(1)
const process = ref('')
const allSize = ref(0)
const num = ref(1)
const dataPageAll = ref([])
const pageAll = ref(0)
// 请求分页接口
const GetPage = async () => {
    let {data:{data,count}} = await axios.get('/text/listAll/GetPageAll',{
        params:{
            pageSize:pageSize.value,
            pageIndex:pageIndex.value,
            process:input.value
        }
    })
    // console.log(data);
    dataPageAll.value = data

    num.value = count
}

const handleSizeChange = (e) => {
    pageSize.value = e
    GetPage()
}
const handleCurrentChange = (e) => {
    pageIndex.value = e
    GetPage()
}

// 新建
const add = ref({
    id: '',
    newName:'',
    remark:'',
    creator:'',
    creationTime:'',
    modifier:'',
    tableName:'',
    process:'',
    feature:'',
    start:'',
    state:true
})

// open 新建抽屉
const drawer = ref(false)
const CTinput = ref('')
// 抽屉组件中确定按钮
const sureAli = () => {
    drawer.value = false
    dataAdd()
    // clear()
}

// 新建的接口
const dataAdd = async () => {
    console.log(add.value);
    let {data} = await axios.post('/text/listAll/add',{
        id:add.value.id,
        newName:add.value.newName,
        remark:add.value.remark,
        creator:add.value.creator,
        creationTime:add.value.creationTime,
        modifier:add.value.modifier,
        tableName:add.value.tableName,
        process:add.value.process,
        feature:add.value.feature,
        start:add.value.start,
        state:add.value.state,
    })
    if(data){
        GetPage()
    }
}

// 清空方法
const clear = () => {
    add.value.remark = ''
    add.value.tableName = ''
    add.value.process = ''
    add.value.feature = ''
    add.value.start = ''
    add.value.creator = ''
    add.value.creationTime = ''
    add.value.state = true
}

const newArr = ref([])
const handleSelectionChange = (val) => {
        newArr.value = val
        return newArr.valu
}
// 删除
const handleDelete =  () => {
    if (newArr.value.length<1) {
        ElMessageBox.alert('请至少选择一项数据进行此操作！', '提示', {
        confirmButtonText: 'OK',
    })
    }else{
        ElMessageBox.confirm(
            '是否确认删除?',
            '提示',
            {
                confirmButtonText: 'OK',
                cancelButtonText: 'Cancel',
                type: 'warning',
            }
            )
            .then(async () => {
            await axios.post('/text/listAll/del',newArr.value)
            GetPage()
            })
            .catch(() => {
                ElMessage({
                type: 'info',
                message: '取消操作',
                })
            })
    }
}

// 编辑弹出框的按钮事件
const dialogVisible = ref(false)
const handleClose = (done) => {
    ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
        done()
    })
    .catch(() => {
    })
}
// 编辑弹出框的确定按钮点击事件
const besure = () => {
    dialogVisible.value = false
    alert('无修改权限  无法更改')
}
let newData = reactive({
    obj:{}
})
const compile = async () => {
    if (newArr.value.length > 1 || newArr.value.length < 1) {
        alert('您至少或至多选择一项进行编辑！')
    }else{
        dialogVisible.value = true
        let {data} = await axios.post('/text/listAll/UpDate',{
            id: newArr.value[0].id,
            newName: newArr.value[0].newName, 
            remark: newArr.value[0].remark, 
            creationTime: newArr.value[0].creationTime, 
            feature: newArr.value[0].feature, 
            state: newArr.value[0].state, 
            start: newArr.value[0].start, 
            process: newArr.value[0].process, 
            tableName: newArr.value[0].tableName, 
            modifier: newArr.value[0].modifier, 
            creator: newArr.value[0].creator, 
        })
        newData.obj = data
        console.log(newData.obj);
        GetPage()
    }
}

// 页面挂载完成
onMounted(()=>{
    list()
    GetPage()
})
</script>
<style scoped lang='scss'>
.approvalProcess{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    outline: none;
    box-sizing: border-box;
    .approvalProcess-top{
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        .left{
            width: 110px;
            // background: red;
            border-bottom: 2px solid black;
            display: flex;
            align-items: center;
            justify-content: space-between;
            align-items: center;
            margin-left: 20px;
            .icon{
                margin: 5px 0 0 0;
            }
            span{
                color: black;
                font-weight: bold;
                font-size: 15px;
            }
        }
        .right{
            width: 670px;
            // background: red;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-right: 15px;
            .input1{
                // width: 160px;
                margin-right: 15px;
            }
            .jgg{
                padding: 8px;
            }
        }
    }
    .approvalProcess-middle{
        display: flex;
        justify-content: center;
        p{
            height: 35px;
            width: 1300px;
            border: 1px solid rgb(209, 247, 166);
            background: rgb(240, 249, 230);
            margin: 10px 0;
            display: flex;
            align-items: center;
            color: rgb(108, 194, 10);
            font-size: 13px;
            padding: 5px;
            box-sizing: border-box;
            .success-btn{
                width: 8px;
                height: 8px;
                margin: 0 10px;
            }
        }
    }
}

//  抽屉组件样式
.ctMain{
    .ctMain-text{
        div{
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 5px 0;
            span{
                display: inline-block;
                width: 120px;
            }
        }
    }
    .ctMain-btn{
        text-align: center;
        margin: 20px 0;
    }
}

</style>